<template>
	<view>
		<qi-navtabbar><view slot="center">我的</view></qi-navtabbar>
		<scroll-view scroll-y class="scrolheight">
			<view>
				<view
					class="u-flex user-box u-p-l-30 u-p-t-30 u-p-r-20 u-p-b-30"
				>
					<view class="u-m-r-10">
						<u-avatar
							:src="vuex_user.avatar_url"
							size="120"
						></u-avatar>
					</view>
					<view class="u-flex-1">
						<view class="u-font-18 u-p-b-20">
							{{ vuex_user.name }}
						</view>
						<view class="u-font-14 u-tips-color">
							邮箱:{{ vuex_user.email || '请先登录' }}
						</view>
					</view>
				</view>

				<view class="u-m-t-20">
					<u-cell-group>
						<u-cell-item
							icon="account"
							title="个人信息"
							@tap="jumpUserInfo"
						></u-cell-item>
					</u-cell-group>
				</view>
				<view class="u-m-t-20">
					<u-cell-group>
						<u-cell-item
							icon="star"
							title="我的收藏"
							@click="checkCollect"
						></u-cell-item>
						<u-cell-item
							icon="rmb-circle"
							title="我的订单"
							@click="checkMyOrder"
						></u-cell-item>
						<u-cell-item
							icon="car"
							title="收货地址"
							@click="checkAddress"
						></u-cell-item>
						<u-cell-item
							icon="map"
							title="位置"
							@click="maptap"
						></u-cell-item>
						<u-cell-item
							icon="chat"
							title="客服"
							@click="myim"
						></u-cell-item>
					</u-cell-group>
				</view>

				<view class="u-m-t-20">
					<u-cell-group>
						<u-cell-item
							@click="handleLogout"
							icon="man-delete"
							title="退出登录"
							class="logout"
						></u-cell-item>
					</u-cell-group>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import badgeMix from '@/mixins/tabbar-badge.js';
export default {
	mixins: [badgeMix],
	name: 'Mine',
	data() {
		return {};
	},
	onLoad() {
		// 校验用户是否登录(未登录退出执行其他操作)
		if (!this.$u.utils.isLogin()) return;
	},
	methods: {
		// 跳转个人信息页
		jumpUserInfo() {
			this.$u.route({
				url: 'pages/mine/userInfo'
			});
		},
		// 跳转我的收藏页
		checkCollect() {
			this.$u.route({
				url: 'pages/mine/collect'
			});
		},
		// 跳转收货地址
		checkAddress() {
			this.$u.route({
				url: 'pages/mine/address'
			});
		},
		// 地图
		maptap() {
			this.$u.route({
				url: 'pages/mine/usermap/usermap'
			});
		},
		myim() {
			this.$u.route({
				url: 'pages/mine/mineim/mineim'
			});
		},
		// 管理我的订单
		checkMyOrder() {
			this.$u.route({
				url: 'pages/mine/myOrder'
			});
		},

		// 退出登录
		async handleLogout() {
			// 提示信息
			// this.$u.toast('退出成功');
			this.$u.vuex('vuex_user', {});
			this.$u.vuex('vuex_token', '');
			uni.setStorageSync('istoken', '');
			uni.showToast({
				title: '退出成功',
				duration: 1000
			});

			// 路由跳转到首页(选择reLaunch方式，避免其他需要登录授权的页面出错)
			this.$u.route({
				type: 'reLaunch',
				url: 'pages/index/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.scrolheight {
	background-color: #ededed;
	height: calc(100vh - 50px - var(--window-bottom));

	// #ifdef MP
	height: calc(100vh - 50px - var(--window-bottom) - 20px);
	// #endif
}
.camera {
	width: 54px;
	height: 44px;

	&:active {
		background-color: #ededed;
	}
}

.user-box {
	background-color: #fff;
}

.logout {
	color: white;
	background: rgb(181, 75, 75) !important;
	::v-deep .uicon-arrow-right {
		color: white !important;
	}
}

.logout:hover {
	box-shadow: 0px 0px 5px red;
}
</style>
